import React, { Component } from 'react';
import './App.css';
import ItemsList from './ItemsList';

class App extends Component {
  constructor(){
    super()
    this.state = {
      cartItems: []
    }
  }
  handleAddingCartButton(items){
    // console.log(items)
    const itemss = this.state.cartItems
    itemss.push(items)
    this.setState({
      cartItems: itemss      
    })
    // console.log(this.state.cartItems)
  }
  render() {
    return (
      <div className="App">
        <h1>商店</h1>
        <ItemsList onAddingcart={this.handleAddingCartButton.bind(this)} />
        <h2>我的购物车</h2>
        <div className="cartList">
          <table>
            <thead>
                <tr>
                    <th>条形码</th>
                    <th>商品名</th>
                    <th>单价</th>
                    <th>单位</th>
                    <th>优惠信息</th>
                    <th>数量</th>
                </tr>
            </thead>
            <tbody>{this.state.cartItems.map((items, i) => {
              return <tr key={i}>
                        <td>{items.barcode}</td>
                        <td>{items.name}</td>
                        <td>{parseFloat(items.price).toFixed(2)}</td>
                        <td>{items.unit}</td>
                        <td>{items.promotion}</td>
                        <td>{items.count}</td>
                    </tr>             
              }
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default App;
